<template>
  <div id="app">
    <div>黑马项目</div>
    <div class="head">
      <span class="iconfont iconnew logo"></span>
      <div class="search">
        <input type="text" />
        <span class="iconfont iconsearch seek"></span>
        <span class="seektext">搜索新闻</span>
      </div>
      <div class="user-entry" @click="geren">
        <span class="iconfont iconwode"></span>
      </div>
    </div>
    <!-- 绑定当前数据的索引 -->
    <van-tabs v-model="activeTab" swipeable>
      <!-- <van-tab :title="item.name" v-for="item in categoriesList" :key="item.id">{{item.name}}</van-tab> -->
      <van-tab :title="item.name" v-for="item in categoriesList" :key="item.id">
        <!-- <div v-for="post in postList" :key="post.id">{{post.title}}</div> -->
        <Postltem :postData="post" v-for="post in postList" :key="post.id">{{post.title}}</Postltem>
      </van-tab>
    </van-tabs>
    <!-- <router-view /> -->
  </div>
</template>

<script>
import Postltem from "@/components/Postltem.vue";
import { log } from "util";
export default {
  components: { Postltem },
  data() {
    return {
      activeTab: 0,
      categoriesList: [],
      postList: []
    };
  },

  created() {
    this.$axios({
      url: "/category",
      method: "get",
      headers: {
        Authorization: "Bearer " + localStorage.getItem("token")
      }
    }).then(res => {
      console.log(res.data);
      this.categoriesList = res.data.data;
      this.getPost();
    });
  },
  computed: {
    categoryId() {
      const currentCategory = this.categoriesList[this.activeTab];
      return currentCategory.id;
    }
  },
  watch: {
    activeTab() {
      this.getPost();
    }
  },
  methods: {
    //请求文章数据
    getPost() {
      const currentCategory = this.categoriesList[this.activeTab];
      const categoryId = currentCategory.id;

      this.$axios({
        url: "/post",
        params: {
          category: this.categoryId
        }
      }).then(res => {
        console.log(this.data);
        this.postList = res.data.data;
      });
    },
    geren() {
      this.$router.replace({ path: "/personal" });
    }
  }
};
</script>
<style lang="less" scoped>
@import url("http://at.alicdn.com/t/font_1426139_h6vn3jbl5q.css");
* {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul,
li,
ol {
  list-style: none;
}
.head {
  width: 100vw;
  height: 13.889vw;
  background: red;
  color: white;
  overflow: hidden;
  .logo {
    margin-left: 4.167vw;
    font-size: 13.889vw;
    float: left;
  }
  .search {
    float: left;
    margin-left: 2.778vw;
    position: relative;
    input {
      background: rgba(204, 204, 204, 0.5);
      border: 0; // 去除未选中状态边框
      outline: none; // 去除选中状态边框
      margin-top: 1.944vw;
      border-radius: 5.556vw;
      width: 54.167vw;
      height: 9.722vw;
      padding-left: 4.167vw;
    }
    .seek {
      position: absolute;
      top: 3.611vw;
      left: 18.833vw;
      font-size: 5.556vw;
    }
    .seektext {
      font-size: 4.167vw;
      position: absolute;
      top: 4.11vw;
      left: 24vw;
    }
  }
  .user-entry {
    span {
      font-size: 8.333vw;
      float: left;
      margin-left: 6.944vw;
      margin-top: 2.5vw;
    }
  }
}
</style>
